import axios from "axios";
import React, { Component } from "react";

import "./index.css";

export default class Search extends Component {
    //连续结构赋值，并且重命名
  search = () => {
    const {
      keyWordElem: { value:keyWord },
    } = this;




    this.props.updateAppState({isFirst:false,isLoading:true});


    console.log(keyWord);
    axios.get(`http://localhost:3000/api1/search/users2?q=${keyWord}`).then(
        response=>{

            let stateObj={
                users:response.data.items,
                isLoading:false
            }

            this.props.updateAppState(stateObj);
            console.log('成功了',response);
        },
        error=>{
            let stateObj={
                error:error.message,
                isLoading:false
            }
            this.props.updateAppState(stateObj);
            console.log('失败了',error);
        }
    )
};

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            ref={(c) => (this.keyWordElem = c)}
            type="text"
            placeholder="enter the name you search"
          />
          &nbsp;<button onClick={this.search}>Search</button>
        </div>
      </section>
    );
  }
}
